<script setup lang="ts">
import { useCommonStore } from '@/store/main'
import $mitt from '@/common/emitter'
import { ACCESS_LOCATION_FN, USER_TYPE_FN } from '@/common/hooks'
import type { MainParams, MenuOptions, MenuHideConfiguration } from '@/components/menuType'

const $store = useCommonStore()
const $route = useRoute()
const $router = useRouter()
const menuData = $store.menuData
const menuMinFlag = ref(false)
const mainParams: MainParams = reactive({
	systemId: $store.systemInfo.systemId,
	systemNameCN: $store.systemInfo.systemNameCN,
	systemFullname: $store.systemInfo.systemFullname,
	systemFullnameInit: $store.systemInfo.systemFullname,
	currentPositionArr: [],
	menu: []
})

const initFn = () => {
	const menuOptionsHideSetFn = (menuArr: MenuOptions[], systemIdItem: string): void => {
		menuArr.forEach(menuItem => {
			// 一级菜单
			if(menuItem.id === systemIdItem) menuItem['isHide'] = true
			// 二级菜单
			menuItem.arr?.length && menuOptionsHideSetFn(menuItem.arr, systemIdItem);
			menuItem.arr?.length && menuItem.arr.forEach(menuItemInner => {
				// 三级菜单
				menuItemInner.arr?.length && menuOptionsHideSetFn(menuItemInner.arr, systemIdItem)
			})
		})
	}

	const menuHideConfiguration: MenuHideConfiguration = menuData.menuHideConfiguration
	const menuHideConfigurationItem: string[] = menuHideConfiguration[mainParams.systemId as keyof MenuHideConfiguration]
	const menuOptions: MenuOptions[] = menuData.menuOptions
	menuHideConfigurationItem.forEach((systemIdItem: string) => menuOptionsHideSetFn(menuOptions, systemIdItem))
	mainParams.menu = menuOptions
}

const gotoAdminFn = () => {
	$router.push({
		path: '/'
	})
}

/**
 * 菜单激活回调
 */
const menuSelectFn = (key: string, keyPath: string[]) => {
	if($route.name === key) return

	if(keyPath.length > 1) {// 当前菜单存在子菜单
		mainParams.menu.forEach(item => {
			if(item.link === keyPath[0]) {
				item.arr?.forEach(itemInner => {
					if(itemInner.link === keyPath[1]) {
						mainParams.currentPositionArr = [item.name, itemInner.name]
						itemInner.arr?.forEach(itemInnerIn => {
							if(itemInnerIn.link === keyPath[2]) mainParams.currentPositionArr = [item.name, itemInner.name, itemInnerIn.name]
						})
					}
				})
			}
		})
	} else {
		mainParams.menu.forEach(item => {
			if(item.link === key) mainParams.currentPositionArr = [item.name]
		})
	}
	ACCESS_LOCATION_FN(mainParams.currentPositionArr)
}

// 更新-后退
onBeforeRouteUpdate(to => {
	mainParams.menu.forEach(item => {
		// 遍历一级菜单
		if(item.link === to.name) return mainParams.currentPositionArr = [item.name]

		// 遍历二级菜单
		item.arr?.forEach(itemInner => {
			if(itemInner.link === to.name) return mainParams.currentPositionArr = [item.name, itemInner.name]

			// 遍历三级菜单
			itemInner.arr?.forEach(itemInnerIn => {
				if(itemInnerIn.link === to.name) mainParams.currentPositionArr = [item.name, itemInner.name, itemInnerIn.name]
			})
		})
	})
	ACCESS_LOCATION_FN(mainParams.currentPositionArr)
})

onMounted(() => {
	initFn()
	$mitt.on('MENU_MIN_FLAG', status => {
		menuMinFlag.value = status as boolean
		mainParams.systemFullname = status ? mainParams.systemNameCN.slice(-2) : mainParams.systemFullnameInit
	})
	$mitt.on('HANDLE_GO_TO_ADMIN_FN', () => gotoAdminFn())
})

onBeforeUnmount(() => {
	$mitt.all.delete('MENU_MIN_FLAG')
	$mitt.all.delete('HANDLE_GO_TO_ADMIN_FN')
})
</script>

<template>
	<el-row :class="[`left-menu ${menuMinFlag ? 'mini-active' : ''}`]">
		<el-col :class="24">
			<el-menu 
				text-color="#b2b7d8" 
				active-text-color="#ee8858" 
				:unique-opened="true" 
				:default-active="$route.name" 
				:router="true" 
				@select="menuSelectFn" 
			>
				<div class="brand" :title="mainParams.systemFullnameInit">
					<span @click="gotoAdminFn" class="brand-txt pointer">
						{{ mainParams.systemFullname }}
					</span>
				</div>

				<div v-for="(item, index) in mainParams.menu" :key="index">
					<!-- 一级菜单 包含 二级 -->
					<template v-if="item.arr?.length && !item.isHide">
						<el-sub-menu :index="`${item.link}`">
							<!-- 一级菜单内容 -->
							<template #title>
								<div class="item-menu-left" :title="item.name">
									<el-icon class="left-menu-icon">
										<component :is="item.icon" />
									</el-icon>
									<span
										:class="menuMinFlag ? 'mini-active-item' : ''"
									>{{ item.name }}</span>
								</div>
							</template>

							<!-- 二级菜单 -->
							<template v-for="(itemInner, indexInner) in item.arr" :key="indexInner">
								<!-- 二级菜单 包含 三级 -->
								<template v-if="itemInner.arr?.length && !itemInner.isHide">
									<el-sub-menu :index="`${itemInner.link}`">
										<!-- 二级菜单内容 -->
										<template #title>
											<div class="item-menu-left" :title="itemInner.name">
												<el-icon class="left-menu-icon">
													<component :is="itemInner.icon" />
												</el-icon>
												<span
													:class="menuMinFlag ? 'mini-active-item' : ''"
												>{{ itemInner.name }}</span>
											</div>
										</template>

										<!-- 三级菜单 -->
										<template v-for="(itemInnerIn, indexInnerIn) in itemInner.arr" :key="indexInnerIn">
											<!-- 三级菜单 包含 四级 -->
											<template v-if="itemInnerIn.arr?.length && !itemInnerIn.isHide">
												<!-- 留空-备用 -->
											</template>

											<!-- 只有三级菜单 -->
											<template v-else>
												<el-menu-item v-if="!itemInnerIn.isHide" :key="indexInnerIn" :index="`${itemInnerIn.link}`" :title="itemInnerIn.name">
													<div class="item-menu-left">
														<el-icon class="left-menu-icon">
															<component :is="itemInner.icon" />
														</el-icon>
														<span
															:class="menuMinFlag ? 'mini-active-item' : ''"
														>{{ itemInnerIn.name }}</span>
													</div>
													
													<el-icon
														class="left-menu-icon"
														:class="menuMinFlag ? 'mini-active-item' : ''"
													>
														<ArrowRight />
													</el-icon>
												</el-menu-item>
											</template>
										</template>
									</el-sub-menu>
								</template>

								<!-- 只有二级菜单 -->
								<template v-else>
									<el-menu-item v-if="!itemInner.isHide" :key="indexInner" :index="`${itemInner.link}`" :title="itemInner.name">
										<div class="item-menu-left">
											<el-icon class="left-menu-icon">
												<component :is="itemInner.icon" />
											</el-icon>
											<span :class="menuMinFlag ? 'mini-active-item' : ''">
												{{ itemInner.name }}
											</span>
										</div>
	
										<el-icon
											class="left-menui-icon" 
											:class="menuMinFlag ? 'mini-active-item' : ''" 
										>
											<ArrowRight />
										</el-icon>
									</el-menu-item>
								</template>
							</template>
						</el-sub-menu>
					</template>

					<!-- 只有一级菜单 -->
					<template v-else>
						<el-menu-item v-if="!item.isHide && (item.id === 'userManage' ? (USER_TYPE_FN({userType: 'isAdministrator'}) ? true : false) : true)" :index="`${item.link}`" :title="item.name">
							<div class="item-menu-left">
								<el-icon class="left-menu-icon">
									<component :is="item.icon" />
								</el-icon>
								<span
									:class="menuMinFlag ? 'mini-active-item' : ''"
								>{{ item.name }}</span>
							</div>

							<el-icon
								class="left-menu-icon"
								:class="menuMinFlag ? 'mini-active-item' : ''"
							>
								<ArrowRight />
							</el-icon>
						</el-menu-item>
					</template>
				</div>

			</el-menu>
		</el-col>
	</el-row>
	
</template>

<style lang="scss" scoped>
.left-menu {
	:deep(.el-menu) {
		border: none;
		
		.brand {
			display: -webkit-flex;
			display: flex;
			align-items: center;
			padding-top: .13rem;
			padding-bottom: .13rem;
			padding-left: .1rem;
			color: #b2b7d8;
			border-bottom: .01rem solid #2d314e;
			background-color: #1c2140;
			.brand-txt {
				font-weight: 700;
				font-size: .16rem;
				white-space: nowrap;
			}
		}

		.el-menu-item, .el-sub-menu {
			display: -webkit-flex;
			display: flex;
			justify-content: space-between;
			padding-left: .1rem;
			padding-right: 0;
			height: .4rem;
			line-height: .4rem;
			border-bottom: .01rem solid #2d314e;
			background-color: #1c2140;

			.item-menu-left {
				flex-grow: 1;
				display: -webkit-flex;
				display: flex;
				justify-content: flex-start;
				align-items: center;
			}

			&.is-active > .left-menu-icon,
			&.is-active > .item-menu-left > .left-menu-icon {
				color: $color-theme;
			}
		}

		.el-sub-menu {
			flex-direction: column;
			height: auto;
			background-color: #1c2140;
	
			.el-menu-item {
				&:first-child {
					border-top: .01rem solid #2d314e;
				}
				&:last-child {
					border-bottom: none;
				}
			}
	
			.el-sub-menu__title {
				padding: 0;
				height: .4rem;
				line-height: .4rem;
	
				.left-menu-icon {
					color: #b2b7d8;
				}
	
				&:hover {
					background-color: #1c2140;
				}
	
				.el-sub-menu__icon-arrow {
					right: .05rem;
					font-size: .16rem;
				}
			}
		}

		.left-menu-icon {
			justify-content: flex-start;
			width: auto;
			color: #b2b7d8;
			font-size: .16rem;
		}
	}

	&.mini-active {
		:deep(.el-menu) {
			.brand {
				justify-content: center;
				padding-left: 0;
				.brand-txt {
					flex-grow: 0;
					flex-shrink: 0;
					margin-right: 0;
					padding-left: .03rem;
					padding-right: 0;
					width: .34rem;
					height: .34rem;
					line-height: .34rem;
					border-radius: .08rem;
					overflow: hidden;
					color: $color-night;
					background-color: #b2b7d8;
					font-size: .14rem;
				}
			}

			.mini-active-item {
				display: none;
				opacity: 0;
			}

			.el-menu-item, .el-sub-menu {
				padding-left: 0;
				.item-menu-left {
					justify-content: center;
				}

			}
			.el-sub-menu {
				.el-sub-menu__title {
					& > .el-sub-menu__icon-arrow {
						display: none;
						opacity: 0;
					}
				}
			}
		}
	}
}
</style>